<template>
	<view class="content">
			<navBack />
		<image src="/static/bg.png" mode="" class="box-bg"></image>
		<view class="card" v-for="item in interestSettlementRecordsData">
			<view class="_title_" style="margin-bottom: 12rpx;">
				结息记录
			</view>
			<view class="lable">
				<view class="">
					房产
				</view>
				<view class="">
					{{item.position}}
				</view>
			</view>
			<view class="lable">
				<view class="">
					结算开始时间
				</view>
				<view class="">
					{{item.startDate}}
				</view>
			</view>
			<view class="lable">
				<view class="">
					结算结束时间
				</view>
				<view class="">
					{{item.endDate}}
				</view>
			</view>
			<view class="lable">
				<view class="">
					结算天数
				</view>
				<view class="">
						{{item.settlementDays}}
				</view>
			</view>
			<view class="lable">
				<view class="">
					收据金额
				</view>
				<view class="">
					￥{{item.amount}}
				</view>
			</view>
			<view class="lable">
				<view class="">
					是否年结
				</view>
				<view class="">
					{{item.settlementByYear?'是':'否'}}
				</view>
			</view>
			<view class="lable">
				<view class="">
					利率结算类型
				</view>
				<view class="">
					{{item.name}}
				</view>
			</view>
			
			<view class="lable">
				<view class="">
					结息利率
				</view>
				<view class="">
					{{item.rate}}
				</view>
			</view>
			<view class="lable">
				<view class="">
					本息(结息前金额)
				</view>
				<view class="">
					{{item.amount}}
				</view>
			</view>
			<view class="lable">
				<view class="">
					本金(结息前金额)
				</view>
				<view class="">
					{{item.principal}}
				</view>
			</view>
			
			<view class="lable">
				<view class="">
					本次结算利息
				</view>
				<view class="">
					{{item.interest}}
				</view>
			</view>
		</view>
		
		<view class="empty" v-if="!interestSettlementRecordsData.length">
			<image src="/static/empty.png" mode=""></image>
			<view class="">
				空空如也
			</view>
		</view>
		<Loading/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				interestSettlementRecordsData:[],
				pageIndex: 1,
				id:''
			}
		},
		onLoad(e) {
			this.id=e.id
			this.upData()
		},
		onReachBottom() {
			this.upData()
		},
		methods: {
			upData() {
				if (!this.pageIndex) return uni.showToast({
					title: '没有更多了！',
					icon:'none'
				});
				let data = {
					pageIndex: this.pageIndex,
					houseId:this.id||''
				}
				this.$myRequest('/api/interestSettlementRecords', data).then(res => {
					if (res.data.length == res.pageSize) {
						this.pageIndex++
					} else {
						this.pageIndex = 0
					}
					this.interestSettlementRecordsData.push(...res.data)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		background-color: #f5f5f5;
		padding: 172rpx 20rpx 0 20rpx;
		min-height: calc(100vh - 172rpx);
		.card{
			padding: 28rpx 20rpx;
		}
	}
</style>
